<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>黑马头条</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../plugins/vant/index.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../../../plugins/css/index.css">
</head>

<body>
<div id="app">
    <div class="article">
        <script>
                        var _authorApUserId= 4
        </script>
        <div style="display:none;">4</div>
            <van-row>
                <van-col span="24" class="article-title" >87分钟！33岁贝尔40米外道超车 1V2强吃射爆美职联</van-col>
            </van-row>

            <van-row type="flex" align="center" class="article-header">
                <van-col span="3">
                    <van-image round class="article-avatar" src="https://p3.pstatp.com/thumb/1480/7186611868"></van-image>
                </van-col>
                <van-col span="16">
                    <div>admin</div>
                    <div>2022-8-7 16:47:57</div>

                </van-col>
                <van-col span="5">
                    <van-button round :icon="relation.isfollow ? '' : 'plus'" type="info" class="article-focus"
                                :text="relation.isfollow ? '取消关注' : '关注'" :loading="followLoading" @click="handleClickArticleFollow">
                    </van-button>
                </van-col>
            </van-row>
        <van-row class="article-content">
                        <van-col span="24" class="article-text">网易体育8月7日报道:</van-col>
                        <van-col span="24" class="article-text">北京时间8月7日消息，美职联常规赛的一场焦点对决，洛杉矶FC队4-1战胜皇家盐湖城队，值得一提的是，新赛季加盟洛杉矶FC的贝尔再次上演经典的40米长途奔袭+外道超车，打进亮相美职联的第二个进球，毫无疑问，这个进球也再次唤醒球迷的记忆。</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text">对阵皇家盐湖城队，33岁的贝尔依然是替补出战，比赛的第87分钟贝尔在边路拿球，盐湖城队两位防守队员第一时间上来防守，想要夹击贝尔，但贝尔利用速度强行生吃对手，带球后突然加速将两位防守队员队员甩开，尽管盐湖城的一位队员在后面穷追不舍，还上了手，希望能阻止贝尔。</van-col>
                        <van-col span="24" class="article-text">但贝尔的速度飞快，再次凭借外道超车摆脱防守，这次1v2的成功突破让贝尔一路奔袭杀进禁区，随后贝尔加速后起左脚内切射门，由于距离球门过近，加上射门力量和角度都几乎是无解，盐湖城队的门将只能网球兴叹。</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text">贝尔用进球帮助球队4-1为比赛画上完美句号，尽管比赛胜负早已没有悬念，但贝尔用标志性进球好好刷了一次存在感，长途奔袭加外道超车，出现在美职联的贝尔也有实力让经典重现。</van-col>
                        <van-col span="24" class="article-text">回首经典时刻，相信球迷不会忘记贝尔多次打进标志性进球，例如2014年国王杯对阵巴萨，贝尔第85分钟就凭借外道超车，上演千里走单骑，为皇马赢得国王杯冠军立下汗马功劳。还有2017年对阵皇家社会，贝尔也是用外道超车方式打进一球，这个进球同样称得上经典。</van-col>
                        <van-col span="24" class="article-text">今年夏天贝尔告别皇马，投身到美职联的怀抱，然而他非但没有从人们视线中消失，反而实现了真正的“降维打击”。北京时间7月24日的美职联对阵堪萨斯城，贝尔出场破门得分，这个进球不仅是贝尔美职联首球，也当选洛杉矶FC队内7月最佳进球。而贝尔为洛杉矶FC贡献的第二球，更是让外道超车重现江湖，他用行动证明，虽然人不在欧洲主流联赛，但足坛江湖依然有他的传说！</van-col>
                        <van-col span="24" class="article-text">作者：江枫</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
        </van-row>

        <van-row type="flex" justify="center" class="article-action">
            <van-col>
                <van-button round :icon="relation.islike ? 'good-job' : 'good-job-o'" class="article-like"
                            :loading="likeLoading" :text="relation.islike ? '取消赞' : '点赞'" @click="handleClickArticleLike"></van-button>
                <van-button round :icon="relation.isunlike ? 'delete' : 'delete-o'" class="article-unlike"
                            :loading="unlikeLoading" @click="handleClickArticleUnlike">不喜欢</van-button>
            </van-col>
        </van-row>

        <!-- 文章评论列表 -->
        <van-list v-model="commentsLoading" :finished="commentsFinished" finished-text="没有更多了"
                  @load="onLoadArticleComments">
            <van-row id="#comment-view" type="flex" class="article-comment" v-for="(item, index) in comments" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                        <van-col span="3">
                            <van-button round size="normal" v-html="item.reply" @click="showCommentRepliesPopup(item.id)">回复 {{
                                item.reply || '' }}
                            </van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <van-row>
            <van-col span="24" >
                <van-button round size="normal" @click="loadMoreComments">
                    查看更多
                </van-button>
            </van-col>
        </van-row>
    </div>
    <!-- 文章底部栏 -->
    <van-row type="flex" justify="space-around" align="center" class="article-bottom-bar">
        <van-col span="13">
            <van-field v-model="commentValue" placeholder="写评论">
                <template #button>
                    <van-button icon="back-top" @click="handleSaveComment"></van-button>
                </template>
            </van-field>
        </van-col>
        <van-col span="3">
            <van-button icon="comment-o" @click="handleScrollIntoCommentView"></van-button>
        </van-col>
        <van-col span="3">
            <van-button :icon="relation.iscollection ? 'star' : 'star-o'" :loading="collectionLoading"
                        @click="handleClickArticleCollection"></van-button>
        </van-col>
        <van-col span="3">
            <van-button icon="share-o"></van-button>
        </van-col>
    </van-row>

    <!-- 评论Popup 弹出层 -->
    <van-popup v-model="showPopup" closeable position="bottom"
               :style="{ width: '750px', height: '60%', left: '50%', 'margin-left': '-375px' }">
        <!-- 评论回复列表 -->
        <van-list v-model="commentRepliesLoading" :finished="commentRepliesFinished" finished-text="没有更多了"
                  @load="onLoadCommentReplies">
            <van-row id="#comment-reply-view" type="flex" class="article-comment-reply"
                     v-for="(item, index) in commentReplies" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentReplyLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <!-- TODO: js计算时间差 -->
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <!-- 评论回复底部栏 -->
        <van-row type="flex" justify="space-around" align="center" class="comment-reply-bottom-bar">
            <van-col span="13">
                <van-field v-model="commentReplyValue" placeholder="写评论">
                    <template #button>
                        <van-button icon="back-top" @click="handleSaveCommentReply"></van-button>
                    </template>
                </van-field>
            </van-col>
            <van-col span="3">
                <van-button icon="comment-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="star-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="share-o"></van-button>
            </van-col>
        </van-row>
    </van-popup>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../../plugins/js/vue.min.js">
</script>
<script src="../../../plugins/js/vant.min.js"></script>
<!-- 引入 Axios 的 JS 文件 -->
<script src="../../../plugins/js/axios.min.js"></script>
<!-- 页面逻辑 -->
<script src="../../../plugins/js/index.js"></script>
</body>
</html>
